<script setup>
defineOptions({ name:'IndexItem' })
import { useCartStore } from '@/stores/car';
import { useRouter } from 'vue-router';
import { useCountDown } from '@/composables/useCountDown';
const countdown = useCountDown()
const router = useRouter()
const storeCart = useCartStore()
countdown.start(storeCart.tiems)

const changeMoney = () => {
    router.push({
        path:'/payback',
    })
}
// 支付地址
// const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
// const backURL = 'http://127.0.0.1:5173/paycallback'
// const redirectUrl = encodeURIComponent(backURL)
// const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`
</script>
<template>
    <div class="box w" style="position: relative;">
       <el-card style="width: 100%" >
           <div class="left">
                <i class="iconfont icon-zhifuzhifuchenggong goods"></i>
                <div class="success">
                    <span style="font-size: 22px; font-weight: bolder;">订单提交成功！请尽快完成支付</span>
                    <span>--</span>
                    <span>支付还剩
                        <em style="font-style: normal; color:#1abf6e; font-weight: bolder;">{{ countdown.newTime }}</em>，
                        超时后将取消订单
                    </span>
                </div>
           </div>
           <div class="right" style="position: absolute; right: 50px; top: 42%;">
               <span>应付总额：</span>
               <span style="color: red; font-weight: bolder;">￥{{ storeCart.money }}.00元</span>
           </div>
       </el-card>
    </div>
    <div class="money w">
        <el-card style="max-width: 100%">
            <template #header>
                    <h2>请选择以下方式付款</h2>
            </template>
            <div class="platform">
                <div class="pingtai" style="margin-bottom: 10px;">支付平台</div>
                <el-button><i class="iconfont icon-weixinzhifu weixin"></i>微信支付</el-button>
                <el-button @click="changeMoney"><i class="iconfont icon-zhifubaozhifu zhifubao"></i>支付宝支付</el-button>
                <!-- <a :href="payUrl"><i class="iconfont icon-zhifubaozhifu zhifubao"></i>支付宝支付</a> -->
            </div>
            <div class="way">
                <div class="fangshi" style="margin: 20px 0 10px;">支付方式</div>
                <el-button>招商银行</el-button>
                <el-button>招商银行</el-button>
                <el-button>招商银行</el-button>
                <el-button>招商银行</el-button>
                <el-button>招商银行</el-button>
                <em>{{ $route.query.id }}</em>
            </div>
        </el-card>
    </div>
</template>
<style scoped>
.w{
    margin: 0 auto;
    width: 1200px;
}
.goods{
    font-size: 56px;
    color: #1abf6e;
   }
.left{
    margin-left: 15px;
    display: flex;
}
.success{
    margin: 14px 0  0  14px;
    display: flex;
    flex-direction: column;
}
.money{
    margin-top: 20px;
}
.weixin,.zhifubao{
    transform: translateX(-8px);
    color: #15ba11;
}
.zhifubao{
    color: #009fe8;
}
</style>